<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面-扫码登录</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<!--<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">-->
<meta http-equiv="expires" content="0">
<link href="../images/favicon.ico" rel="shortcut icon" />
</head>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
* {
	margin: 0px auto;
	pdding: 0px;
}

body, html {
	margin: 0px auto;
	padding: 0px;
	background: url(../images/bg_keji5.jpg) no-repeat;
	width: 100%;
	height: 100%;
	background-attachment: fixed;
	background-size: cover;
	-webkit-background-size: cover; /* 兼容Webkit内核浏览器如Chrome和Safari */
	-o-background-size: cover; /* 兼容Opera */
	zoom: 1;
}

#login_div {
	margin: 0px auto;
	width: auto;
	height: 100%;
	min-height: 668px;
	min-width: 1366px;
}

#logo_nav {
	width: 416px;
	height: 152px;
	position: absolute;
	top: 29%;
	left: 14.5%;
}

#content_nav {
	text-align: left;
	width: 352px;
	height: 100px;
	padding-top: 25px;
	float: left;
}

#filter_div {
	position: absolute;
	width: 360px;
	height: 360px;
	top: 24.3%;
	right: 14.2%;
	background-color: #EBF0FB;
	filter: alpha(opacity = 50); /*ie滤镜，透明度50%*/
	-moz-opacity: 0.5; /*Firefox私有，透明度50%*/
	opacity: 0.5; /*其他，透明度50%*/
}

#input_nav {
	position: absolute;
	width: 360px;
	height: 360px;
	top: 24.3%;
	right: 14.2%;
	z-index: 999;
	display: block;
}

#footer {
	position: fixed;
	height: 32px;
	bottom: 9%;
	right: 8%;
}

#content_nav p {
	font-family: "华文细黑";
	color: white;
	font-size: 24px;
	letter-spacing: 2.4px;
}

#footer p {
	font-family: "华文细黑";
	color: white;
	font-size: 13px;
	line-height: 18px;
	margin-top: 8px;
}
/**底部样式*/
#enter {
	width: 100%;
	height: 24px;
}

#enter ul {
	height: 100%;
	margin-left: 25px;
}

#enter ul li {
	float: left;
	margin: auto 3px;
	text-align: center;
	list-style: none;
}

#enter ul li a {
	color: #FFFFFF;
	font: 13px '华文细黑';
	line-height: 20px;
	margin: 10px auto;
}

#enter ul li a:hover {
	color: #f60;
	text-decoration: underline;
	font: 13px '华文细黑';
	line-height: 20px;
	margin: 10px auto;
}

#input_head {
	width: 100%;
	height: 72px;
}

#head_p {
	position: absolute;
	width: 108px;
	height: 10px;
	margin-top: 24px;
	margin-left: 164px;
}

#input_head, #qrcode_head p {
	font-size: 12px;
	font-family: "华文细黑";
	line-height: 10px;
	color: #576071;
}

#input_content {
	position: absolute;
	width: 100%;
	height: 304px;
	margin-left: 0px;
}

.p_div {
	width: 242px;
	height: 46px;
	margin-left: 60px;
	margin-bottom: 12px;
	background-color: #576071;
	border: none;
}

.p_div .p_div_refresh {
	width: 24px;
	height: 22px;
	padding-bottom: 2px;
}

.p_div .p_div_refresh:hover {
	width: 24px;
	height: 22px;
	padding-bottom: 2px;
	cursor: pointer;
}

.p_button {
	width: 242px;
	height: 44px;
	margin-left: 60px;
	margin-top: 24px;
}

.p_input {
	width: 240px;
	height: 44px;
	background-color: #576071;
	border: none;
	text-indent: 12px;
	color: #FFFFFF;
}

.p_rand {
	float: left;
	width: 240px;
	height: 44px;
	background-color: #576071;
	border: none;
	text-indent: 12px;
	color: #FFFFFF;
}

.p_bt {
	width: 242px;
	height: 44px;
	background-color: #265DF6;
	color: #FFFFFF;
	font-size: 17px;
	line-height: 18px;
	font-family: "华文细黑";
	border: none;
}

.a_div {
	float: right;
}

.a_div a {
	text-decoration: none;
	font-size: 12px;
	color: #FFFFFF;
	line-height: 16px;
	display: inherit;
}

.p_bt:hover {
	background: #4876FF repeat-x scroll 0 0;
	cursor: pointer;
}

.p_div_text {
	width: 242px;
	height: 16px;
	margin-left: 60px;
}

.p_checkbox {
	float: left;
	display: flex;
}

.login_checkbox {
	height: 16px;
	width: 16px;
	border-radius: 4px;
	cursor: pointer;
}

.unchecked {
	background: url('../images/uncheck@2x.png') no-repeat center/cover;
}

.checked {
	background: url('../images/checked@2x.png') no-repeat center/cover;
}

.login_text {
	font-size: 12px;
	color: #ffffff;
	line-height: 16px;
	margin-left: 3px;
}

.login_text label {
	line-height: 16px;
}

/*placeholder 样式*/
/* WebKit browsers */
::-webkit-input-placeholder {
	color: #CCCCCC;
	font-size: 11px;
	line-height: normal;
}
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder {
	color: #CCCCCC;
	font-size: 11px;
	line-height: 44px;
	opacity: 1;
}
/* Mozilla Firefox 19+ */
::-moz-placeholder {
	color: #CCCCCC;
	font-size: 11px;
	line-height: 44px;
	opacity: 1;
}
/* Internet Explorer 10+ */
:-ms-input-placeholder {
	color: #CCCCCC;
	font-size: 11px;
	line-height: 44px;
}

/*二维码div*/
#qrcode_nav {
	position: absolute;
	width: 360px;
	height: 360px;
	top: 24.3%;
	right: 14.2%;
	z-index: 999;
	display: none;
}

#qrcode_head {
	width: 100%;
	height: 72px;
}

#qrcode_content {
	position: absolute;
	width: 100%;
	height: 304px;
	margin-left: 0px;
}

#qr_code {
	width: 223px;
	height: 223px;
	position: absolute;
	margin-left: 69px;
}

#mask_qrcode {
	width: 223px;
	height: 223px;
	position: absolute;
	margin-left: 69px;
	display: none;
}

#mask_confirm {
	width: 223px;
	height: 223px;
	position: absolute;
	margin-left: 69px;
	display: none;
}

.retry_qrcode {
	width: 223px;
	height: 223px;
	z-index: 999;
	background-color: #FFFFFF;
	position: absolute;
	filter: alpha(opacity = 95); /*ie滤镜，透明度95%*/
	-moz-opacity: 0.95; /*Firefox私有，透明度95%*/
	opacity: 0.95; /*其他，透明度95%*/
}

#scan_icon {
	width: 223px;
	height: 20px;
	position: absolute;
	margin-left: 69px;
	margin-top: 234px;
}

#scan_icon p {
	font-size: 14px;
	color: #FFFFFF;
	line-height: 20px;
	font-family: "华文细黑";
}

#scan_icon a {
	color: #275FF4;
	font-size: 14px;
	line-height: 20px;
	font-family: "华文细黑";
	text-decoration: none;
}

/*大写提示框*/
.capslock {
	padding: 0 2px 2px 26px;
	position: absolute;
	margin: 0 0 0 60px;
	width: 130px;
	height: 30px;
	line-height: 30px;
	display: none;
	overflow: hidden;
	z-index: 4;
	color: #124fed;
	background: url(../images/capslock.png) no-repeat;
	background-size: cover;
}

.capslock {
	font-size: 14px;
	color: red;
	padding-top: 6px;
}
</style>
<body>
	<div id="login_div">
		<div id="logo_nav">
			<img src="../images/logo.png" style="height: 152px; width: 416px;" />
			<div id="content_nav">
				<p>实战剖析</p>
				<p>原理与实现</p>
			</div>
		</div>
		<div id="filter_div"></div>
		<div id="input_nav">
			<div id="input_head">
				<img src="../images/tips@2x.png"
					style="position: absolute; margin-left: 137px; margin-top: 14px; width: 151px; height: 30px;" />
				<img src="../images/shield@2x.png"
					style="position: absolute; margin-left: 143px; margin-top: 20px; width: 16px; height: 18px;" />
				<div id="head_p">
					<p>扫码登录更安全便捷</p>
				</div>
				<img src="../images/QR@2x.png" onclick="qrcode_login()"
					style="position: absolute; margin-top: 6px; margin-left: 288px; width: 66px; height: 66px; cursor: pointer;" />
			</div>
			<div id="input_content">
				<div class="p_div">
					<input type="text" id="username" class="p_input"
						placeholder="请输入您的账号" value="" />
				</div>
				<div class="p_div">
					<input type="password" id="password" class="p_input"
						placeholder="请输入您的密码" value="" />
				</div>
				<div class="p_div">
					<div style="float: left;">
						<input type="text" id="rand" class="p_rand" placeholder="请输入验证码" />
						<div
							style="float: right; margin: 10px 0 10px 0px; position: absolute; left: 188px;">
							<img src="#" id="safecode"
								style="width: 80px; height: 26px; border: none;" /> <img
								src="../images/icon_refresh.png" class="p_div_refresh"
								onclick="reloadcode('true')">
						</div>
					</div>
				</div>
				<div class="p_div_text">
					<div class="p_checkbox"></div>
					<div class="a_div">
						<a href="javascript:void(0)" onclick="resetPass()">忘记密码？</a>
					</div>
				</div>
				<div class="p_button">
					<button type="button" class="p_bt" onclick="onLogin()" id="onLogin">登
						录</button>
				</div>
				<!--<div class="a_div" style="text-align:right;line-height:15px;height:20px;width:240px;height:15px;margin-top:13px;">-->
				<!--<a href="javascript:void(0)" onclick="resetPass()">忘记密码？</a>-->
				<!--</div>-->
			</div>
		</div>
		<div id="qrcode_nav">
			<div id="qrcode_head">
				<img src="../images/tips@2x.png"
					style="position: absolute; margin-left: 137px; margin-top: 14px; width: 151px; height: 30px;" />
				<img src="../images/user@2x.png"
					style="position: absolute; margin-left: 143px; margin-top: 20px; width: 16px; height: 18px;" />
				<div id="head_p">
					<p>使用账号密码登录</p>
				</div>
				<img src="../images/computer@2x.png" onclick="acc_login()"
					style="position: absolute; margin-top: 6px; margin-left: 311px; width: 42.8px; height: 50px; cursor: pointer;" />
			</div>
			<div id="qrcode_content">
				<div id="qr_code"></div>
				<div id="mask_qrcode">
					<div class="retry_qrcode">
						<div
							style="width: 109px; height: 25px; margin-left: 61px; margin-top: 66px;">
							<p
								style="font-size: 16px; color: #333333; font-family: 华文细黑; line-height: 25px; font-weight: 600;">二维码已失效</p>
						</div>
					</div>
					<div class="retry_button"
						style="position: absolute; width: 168px; height: 44px; margin-left: 32px; margin-top: 112px; z-index: 999;">
						<button type="button" onclick="retry_qrcode_login()"
							style="width: 168px; height: 44px; border: none; background-color: #265Df6; color: #FFFFFF; font-size: 13px; line-height: 18px;">请点击刷新</button>
					</div>
				</div>
				<div id="mask_confirm">
					<div class="retry_qrcode">
						<div
							style="width: 109px; height: 25px; margin-left: 61px; margin-top: 66px; text-align: center;">
							<p
								style="font-size: 16px; color: #333333; font-family: 华文细黑; line-height: 25px; font-weight: 600;">扫描成功</p>
							<p
								style="font-size: 12px; color: #333333; font-family: 华文细黑; line-height: 25px; font-weight: 400;">请在手机上确认登录</p>
						</div>
					</div>
					<div class="retry_button"
						style="position: absolute; width: 168px; height: 44px; text-align: center; margin-left: 32px; margin-top: 142px; z-index: 999;">
						<a onclick="retry_qrcode_login()" href="javascript:void(0)"
							style="width: 168px; height: 44px; color: red; font-size: 13px; line-height: 18px;">返回二维码登录</a>
					</div>
				</div>
				<div id="scan_icon">
					<div style="height: 20px; float: left">
						<img src="../images/scan@2x.png"
							style="width: 24px; height: 20px;" />
					</div>
					<div style="height: 20px; float: left;">
						<p>
							&nbsp;&nbsp;请使用&nbsp;&nbsp;<a href="#" target="_blank">APP</a>&nbsp;&nbsp;扫一扫登录
						</p>
					</div>
				</div>
			</div>
		</div>
		<div id="footer">
			<div id="enter">
				<ul id="footer_enter"></ul>
			</div>
			<p>© 2019 Tony All Right Reserved</p>
		</div>
	</div>

	<div id="maskDiv" style="display: none;"></div>

	<script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
	<script src="../js/qrcode.js"></script>
	<script src="../js/jquery.qrcode.min.js"></script>

	<script type="text/javascript">

	var isContinue = true;
	var type = "";
	var text = "";
	var BaseUrl = "http://localhost:8081";
	var APP_NAME = "scan_login_demo";

	$(function () {
		//加载验证码接口
	  	var uniqueKey = sessionStorage.getItem(APP_NAME + "_uniqueKey");
	  	if( uniqueKey == null || uniqueKey == ""){
	    	uniqueKey = randomString(32);
	    	sessionStorage.setItem(APP_NAME + "_uniqueKey",uniqueKey);
	  	}
	  	reloadcode("false");
	});
	
	var countdown = 120;
	
	//捕获回车事件登录
	document.onkeydown = function(event_e){    
        if(window.event)    
         event_e = window.event;    
         var int_keycode = event_e.charCode||event_e.keyCode;    
         if(int_keycode ==13){   
         	onLogin();
        }  
    } 
	//界面加载自动聚焦到用户名输入框
	document.getElementById("username").focus();
	
	//使用ajax的方式提交登录信息，然后通过json数据格式将返回结果返回
	function onLogin(){
	    // 获取是否记住密码登陆
		var ifLogin = $("#ifLogin").val();
		//点击登录按钮之后不可重复再点击
		$("#onLogin").attr('disabled','disabled');
		$("#onLogin").text("登录中...");
		$("#onLogin").focus();
		var username = document.getElementById("username").value;
		var password = document.getElementById("password").value;
		var rand = document.getElementById("rand").value;
		var uniqueCode = sessionStorage.getItem(APP_NAME + "_uniqueKey");
		
		if(username == "" || username == null ){
			flag = "请输入您的账号信息";
			$("#username").focus();
			$("#onLogin").removeAttr('disabled');
			$("#onLogin").text("登　　录");
			alert(flag);
			return
		}
		if( password == "" || password == null ){
			flag = "请输入您的密码信息";
			$("#password").focus();
			$("#onLogin").removeAttr('disabled');
			$("#onLogin").text("登　　录");
			alert(flag);
			return
		}
		if(rand == "" || rand == null ){
			flag = "请输入右侧图片中的数字验证码";
			$("#rand").focus();
			$("#onLogin").removeAttr('disabled');
			$("#onLogin").text("登　　录");
			alert(flag);
			return
		}
		var params= {username: username,password: password,verifyCode: rand,uniqueCode: uniqueCode};
		params = JSON.stringify(params);
		$.ajax({
	         type: 'POST',
	         url: BaseUrl + '/auth/token',
	         dataType: "json",
       	 	 contentType:"application/json",
	         data: params,
	         success:function(data){
		         var isSuccess = data.isSuccess; 
		         if( isSuccess == true ){
		        	 sessionStorage.setItem(APP_NAME, data.data);
	         		 window.location.href = "./confirm.html";
		         }else{
		        	$("#onLogin").removeAttr('disabled');
		 			$("#onLogin").text("登　　录");
		         	alert(data.responseMsg);
		         	reloadcode();
		         }
		     }
	     });
	}

	//切换成二维码登录
	function qrcode_login(){
		$("#mask_qrcode").hide();
		$("#mask_confirm").hide();
		$("#input_nav").hide();
		$("#qrcode_nav").show();
		$("#qr_code").html("");
		//先获取二维码的唯一编码
		var params= {context:text};
		params = JSON.stringify(params);
		$.ajax({
	         type: 'POST',
	         url: BaseUrl+ '/auth/getQrcodeContent',
	         dataType: "json",
       	 	 contentType:"application/json",
	         data: params,
	         success:function(data){
		         var isSuccess = data.isSuccess;
		         if( isSuccess == true ){
		        	text = data.data;
		        	console.log("二维码内容：");
		        	console.log(text);
		 			$("#qr_code").qrcode({
		     			width:223, //宽度
		     			height:223, //高度
		                typeNumber:-1,//计算模式
		                correctLevel:2,//二维码纠错级别
		     			text: text //任意内容
		     		});
		             //不断向后台发起请求检测当前二维码的状态
		            isContinue = true;
		            type = "";
		            longPolling(text,type);
		         }else{
		         	alert(data.responseMsg);
		         }
		     }
	     });
	}

	//切换成账号密码登录
	function acc_login(){
		$("#input_nav").show();
		$("#qrcode_nav").hide();
		isContinue = false;
		type = "";
	}

	//重新获取登录二维码
	function retry_qrcode_login(){
		isContinue = true;
		type = "";
		qrcode_login();
		$("#mask_qrcode").hide();
		$("#mask_confirm").hide();
	}

	//长连接检测当前二维码的状态
	function longPolling(context,type) {
		if( isContinue == false ){
			return
		}
    	var params= {context:context,type:type};
		params = JSON.stringify(params);
        $.ajax({
        	type: 'POST',
            url: BaseUrl + '/auth/qrcodeCheckLogin',
            dataType: "json",
   	 	 	contentType:"application/json",
	        data:params,
            timeout: 10000,
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $("#state").append("[state: " + textStatus + ", error: " + errorThrown + " ]<br/>");
                if (textStatus == "timeout") { // 请求超时
                    longPolling(text,type); // 递归调用
                	// 其他错误，如网络错误等
                } else {
                    longPolling(text,type);
                }
            },
            success: function (data, textStatus) {
                $("#state").append("[state: " + textStatus + ", data: { " + data + "} ]<br/>");
                if (textStatus == "success") { // 请求成功
                	var resCode = data.responseCode;
                	if( resCode == 1101 ){
                		//如果是当前请求的二维码内容失效时提在页面提示
                		if( context == text ){
	                		//二维码已失效，添加遮罩
	                		$("#mask_confirm").hide();
	                		$("#mask_qrcode").show();
                		}
                	}else if( resCode == 1103 ){
                		//取消登录，二维码失效，添加遮罩
                		$("#mask_confirm").hide();
                		$("#mask_qrcode").show();
                	}else if( resCode == 1102 ){
                		//扫描成功，请在手机上确认登录
                		type = "scan";
                		longPolling(text,type);
                		$("#mask_confirm").show();
                	}else if( resCode == 0 ){
                		//登录成功
                		window.location.href= "index.html";
                	}else if( resCode == 1301 || resCode == 1105 ){
                		alert(data.responseMsg);
                		retry_qrcode_login();
                        longPolling(text,type);
                	}
                }
            }
        });
    }
	
	function reloadcode(refresh) {
	    var uniqueKey = sessionStorage.getItem(APP_NAME + "_uniqueKey");
	    var params = JSON.stringify({uniqueKey:uniqueKey,refresh:refresh});
	    $.ajax({
	      type: 'POST',
	      url: BaseUrl + '/auth/getVerifyCode',
	      dataType: "json",
	      contentType: "application/json",
	      data: params,
	      success: function (data) {
	        var isSuccess = data.isSuccess;
	        if (isSuccess == true) {
	          $("#safecode").attr('src', "data:image/jpeg;base64," + data.data); 
	        }
	      }
	    });
	}
	
	function randomString(len) {
	    len = len || 32;
	    let timestamp = new Date().getTime();
	　       let $chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefhijklmnopqrstuvwxyz123456789';
	　       let maxPos = $chars.length;
	　       let randomStr = '';
	　       for (let i = 0; i < len; i++) { 
	     	randomStr +=$chars.charAt(Math.floor(Math.random() * maxPos)); 　　
	    }
	    return randomStr + timestamp; 
	}
	
	//密码大写输入提示  
    function capitalTip(id){  
        $('#' + id).after('<div class="capslock" id="capital_password"><span>大写锁定已开启</span></div>');  
        var capital = false; //聚焦初始化，防止刚聚焦时点击Caps按键提示信息显隐错误  
          
        // 获取大写提示的标签，并提供大写提示显示隐藏的调用接口  
        var capitalTip = {  
            $elem: $('#capital_'+id),  
            toggle: function (s) {  
                if(s === 'none'){  
                    this.$elem.hide();  
                }else if(s === 'block'){  
                    this.$elem.show();  
                }else if(this.$elem.is(':hidden')){  
                    this.$elem.show();  
                }else{  
                    this.$elem.hide();  
                   }  
            }  
        }  
        $('#' + id).on('keydown.caps',function(e){  
            if (e.keyCode === 20 && capital) { // 点击Caps大写提示显隐切换  
                capitalTip.toggle();  
            }  
        }).on('focus.caps',function(){capital = false}).on('keypress.caps',function(e){capsLock(e)}).on('blur.caps',function(e){  
            //输入框失去焦点，提示隐藏  
            capitalTip.toggle('none');  
        });  
        function capsLock(e){  
            var keyCode = e.keyCode || e.which;// 按键的keyCode  
            var isShift = e.shiftKey || keyCode === 16 || false;// shift键是否按住  
            if(keyCode === 9){  
                capitalTip.toggle('none');  
            }else{  
              //指定位置的字符的 Unicode 编码 , 通过与shift键对于的keycode，就可以判断capslock是否开启了  
              // 90 Caps Lock 打开，且没有按住shift键  
              if (((keyCode >= 65 && keyCode <= 90) && !isShift) || ((keyCode >= 97 && keyCode <= 122) && isShift)) {  
                  // 122 Caps Lock打开，且按住shift键  
                  capitalTip.toggle('block'); // 大写开启时弹出提示框  
                  capital = true;  
              } else {  
                  capitalTip.toggle('none');  
                  capital = true;  
              }  
            }  
        }  
    };  
      
    //调用提示  
    capitalTip('password');

</script>
</body>
</html>